<template>
  <div>
    <div ref="homeOvertimeRef" style="height: 320px;width:100%"></div><br>
		<el-divider></el-divider>
		<div ref="homeOvertimeRef1" style="height: 320px;width:100%"></div><br>
		<el-divider></el-divider>
		<div ref="homeOvertimeRef2" style="height: 320px;width:100%"></div>
  </div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, getCurrentInstance,onUnmounted } from 'vue';
import * as echarts from 'echarts';
export default {
  name: 'diagram',
  setup() {
    const { proxy } = getCurrentInstance() as any;
		const state = reactive({

    });
    // 2020年度绩效考核
		const initHomeOvertime = () => {
			const myChart = echarts.init(proxy.$refs.homeOvertimeRef);
			const option = {
						title: {
							subtext: "该员工2020年度绩效考核",
							left: "center",
							top: "center",
							textStyle: {
								fontSize: 30
							},
							subtextStyle: {
								fontSize: 20
							},
							show: true,
							text: ""
						},
							tooltip: {
									trigger: 'axis',
									axisPointer: {
											type: 'cross',
											crossStyle: {
													color: '#999'
											}
									}
							},
							toolbox: {
									feature: {
											dataView: {show: true, readOnly: false},
											magicType: {show: true, type: ['line', 'bar']},
											restore: {show: true},
											saveAsImage: {show: true}
									}
							},
							legend: {
									data: ['达到绩效', '绩效考核','平均绩效', '绩效考核1']
							},
							xAxis: [
									{
											type: 'category',
											data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
											axisPointer: {
													type: 'shadow'
											}
									}
							],
							yAxis: [
									{
											type: 'value',
											name: '考核分/分',
											min: 0,
											max: 100,
											interval: 10,
											axisLabel: {
													formatter: '{value}'
											}
									}
							],
							series: [
									{
											name: '达到绩效',
											type: 'bar',
											data: [96, 92, 91, 80, 91, 85, 92, 81, 96, 86,84, 87]
									},
									{
											name: '绩效考核',
											type: 'bar',
											data: [80,80,80,80,80,80,80,80,80,80,80,80]
									},
									{
											name: '平均绩效',
											type: 'bar',
											data: [89,85,87,89.57,86.77,87.50,89.17,87,89.57,86.77,80,81.2]
									},
									{
											name: '绩效考核1',
											type: 'line',
											yAxisIndex: 0,
											data: [80,80,80,80,80,80,80,80,80,80,80,80]
									}
							]
					};
			myChart.setOption(option);
			window.addEventListener('resize', () => {
				myChart.resize();
			});
		};

		// 2019年度绩效考核
		const initHomeOvertime1 = () => {
			const myChart = echarts.init(proxy.$refs.homeOvertimeRef1);
			const option = {
						title: {
							subtext: "该员工2019年度绩效考核",
							left: "center",
							top: "center",
							textStyle: {
								fontSize: 30
							},
							subtextStyle: {
								fontSize: 20
							},
							show: true,
							text: ""
						},
							tooltip: {
									trigger: 'axis',
									axisPointer: {
											type: 'cross',
											crossStyle: {
													color: '#999'
											}
									}
							},
							toolbox: {
									feature: {
											dataView: {show: true, readOnly: false},
											magicType: {show: true, type: ['line', 'bar']},
											restore: {show: true},
											saveAsImage: {show: true}
									}
							},
							legend: {
									data: ['达到绩效', '绩效考核','平均绩效', '绩效考核1']
							},
							xAxis: [
									{
											type: 'category',
											data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
											axisPointer: {
													type: 'shadow'
											}
									}
							],
							yAxis: [
									{
											type: 'value',
											name: '考核分/分',
											min: 0,
											max: 100,
											interval: 10,
											axisLabel: {
													formatter: '{value}'
											}
									}
							],
							series: [
									{
											name: '达到绩效',
											type: 'bar',
											data: [96, 92, 91, 80, 91, 85, 92, 81, 96, 86,84, 87]
									},
									{
											name: '绩效考核',
											type: 'bar',
											data: [80,80,80,80,80,80,80,80,80,80,80,80]
									},
									{
											name: '平均绩效',
											type: 'bar',
											data: [89,85,87,89.57,86.77,87.50,89.17,87,89.57,86.77,80,81.2]
									},
									{
											name: '绩效考核1',
											type: 'line',
											yAxisIndex: 0,
											data: [80,80,80,80,80,80,80,80,80,80,80,80]
									}
							]
					};
			myChart.setOption(option);
			window.addEventListener('resize', () => {
				myChart.resize();
			});
		};


		// 2020年度绩效考核
		const initHomeOvertime2 = () => {
			const myChart = echarts.init(proxy.$refs.homeOvertimeRef2);
			const option = {
						title: {
							subtext: "该员工2018年度绩效考核",
							left: "center",
							top: "center",
							textStyle: {
								fontSize: 30
							},
							subtextStyle: {
								fontSize: 20
							},
							show: true,
							text: ""
						},
							tooltip: {
									trigger: 'axis',
									axisPointer: {
											type: 'cross',
											crossStyle: {
													color: '#999'
											}
									}
							},
							toolbox: {
									feature: {
											dataView: {show: true, readOnly: false},
											magicType: {show: true, type: ['line', 'bar']},
											restore: {show: true},
											saveAsImage: {show: true}
									}
							},
							legend: {
									data: ['达到绩效', '绩效考核','平均绩效', '绩效考核1']
							},
							xAxis: [
									{
											type: 'category',
											data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
											axisPointer: {
													type: 'shadow'
											}
									}
							],
							yAxis: [
									{
											type: 'value',
											name: '考核分/分',
											min: 0,
											max: 100,
											interval: 10,
											axisLabel: {
													formatter: '{value}'
											}
									}
							],
							series: [
									{
											name: '达到绩效',
											type: 'bar',
											data: [96, 92, 91, 80, 91, 85, 92, 81, 96, 86,84, 87]
									},
									{
											name: '绩效考核',
											type: 'bar',
											data: [80,80,80,80,80,80,80,80,80,80,80,80]
									},
									{
											name: '平均绩效',
											type: 'bar',
											data: [89,85,87,89.57,86.77,87.50,89.17,87,89.57,86.77,80,81.2]
									},
									{
											name: '绩效考核1',
											type: 'line',
											yAxisIndex: 0,
											data: [80,80,80,80,80,80,80,80,80,80,80,80]
									}
							]
					};
			myChart.setOption(option);
			window.addEventListener('resize', () => {
				myChart.resize();
			});
		};

		// 页面加载前
		onMounted(() => {
			initHomeOvertime();
			initHomeOvertime1();
			initHomeOvertime2();
		});


    return{
      ...toRefs(state),
    };
  },
  data () {
    return {}
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
</style>
